<template>
  <div class="hello" :style="{backgroundImage:'url('+schoolBg+')'}">

    <h1><span style="font-weight:bold">WELCOME TO </span>{{ ` ${school}_Java程序设计在线评判系统 ` }}</h1>
    <div class="content">
      <!--span>{{name}} ,</span>
      <span v-if="time==1">早上好！</span>
      <span v-else-if="time==2">下午好！</span>
      <span v-else>晚上好！</span-->
    </div>
    <div class="footer">
      <el-divider content-position="center">
      <p>粤ICP备2022047280号</p>
        <span class="name">SCAU传智工作室&nbsp;</span>
        <span>Copyright © 2021</span>
        <span>&nbsp;All rights reserved</span>
        
      </el-divider>
    </div>
  </div>
</template>

<script>
  import {
    findBySchoolId
  } from "@/api/school";
  export default {
    name: "home",
    data() {
      return {
        school: null,
        name: null,
        schoolBg: "/static/img/backgroud.e5c3bf5.jpg",
        time:null
      };
    },
    created() {
      let user = JSON.parse(localStorage.getItem("user"))
      this.school = user.schoolName;
      this.name = user.nickname;
      let hour = new Date().getHours();
      console.log(hour);
      if (hour >= 0 && hour < 12) this.time = 1;
      else if (hour >= 12 && hour < 18) this.time = 2;
      else this.time = 3;
      findBySchoolId(user.schoolId).then((res) => {
        this.schoolBg = res.data.schoolBackground;
      });
      this.open();
    },
    methods: {
      open() {
        const h = this.$createElement;
        let word = null;
        if(this.time == 1) {
          word = "早上好！"
        } else if(this.time == 2) {
          word = "中午好！"
        } else {
          word = "晚上好！"
        }
        this.$message({
          //title: '标题名称',
          message: h('i', {
            style: 'color: teal;font-size:20px'
             }, this.name+","+word),
          duration: 4500,
          offset: 200
          

        });
      },
      

    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  img {
    border-style: groove;
    border: 3px solid;
  }

  .hello {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: no-repeat center center;
  }

  h1 {
    color: #409eff;
    font-weight: normal;
  }

  .content {
    flex: 1;
    line-height: 50vh;
    font-size: 28px;
    text-align: center;
  }

  .name:hover {
    cursor: pointer;
    text-decoration: underline;
    color: red;
  }

  .el-divider__text,
  .el-link {
    font-size: 12px;
  }
  .el-notification.right {
    right:200rem;
  }

 
</style>

